import 'package:flutter/material.dart';

class _NavBar extends StatelessWidget {
  final String title;
  final Color color;
  _NavBar({
    Key key,
    this.color,
    this.title
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints(
        minHeight: 52,
        minWidth: double.infinity
      ),
      decoration: BoxDecoration(
        color: color,
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            offset: Offset(0, 3),
            blurRadius: 3
          )
        ],
      ),
      child: Text(
        title,
        style: TextStyle(
          fontWeight: FontWeight.bold,
          /// 假如，我们要实现一个背景颜色和Title可以自定义的导航栏，并且背景色为深色时我们应该让Title显示为浅色；
          /// 背景色为浅色时，Title显示为深色。要实现这个功能，我们就需要来计算背景色的亮度，然后动态来确定Title的
          /// 颜色。Color类中提供了一个computeLuminance()方法，它可以返回一个[0-1]的一个值，数字越大颜色就越浅，
          /// 我们可以根据它来动态确定Title的颜色
          color: color.computeLuminance() < 0.5 ? Colors.white : Colors.black
        ),
      ),
      alignment: Alignment.center,
    );
  }
}


class ColorsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Colors"),
      ),
      body: Flex(
        direction: Axis.vertical,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: _NavBar(
              color: Colors.blue,
              title: "Title",
            )
          ),
          Expanded(
            flex: 1,
            child: _NavBar(
              color: Colors.white,
              title: "Title",
            ),
          ),
          Expanded(
            flex: 1,
            child: ListView.builder(
              itemCount: 10,
              itemBuilder: (context, index) {
                int colorIndex = index * 100 == 0 ? 50 : index * 100;
                return ListTile(
                  title: Text(
                    "Colors.blue[$colorIndex]",
                    style: TextStyle(
                      color: Colors.blue[colorIndex]
                    ),
                  ),
                );
              },
            ),
          )
        ],
      )
    );
  }
}